<template>
  <div class="settings">
    <div class="container">
      <div class="user" v-if="data.user.nickname !== undefined">
        <div class="left">
          <img class="avatar" :src="data.user.avatarUrl" />
          <div class="info">
            <div class="nickname">{{ data.user.nickname }}</div>
            <div class="extra-info">
              <span v-if="data.user.vipType !== 0" class="vip"
                ><img
                  class="cvip"
                  src=""
                />
                <span class="text">黑胶VIP</span>
              </span>
              <span class="text" v-else>{{ data.user.signature }}</span>
            </div>
          </div>
        </div>
        <div class="right">
          <button @click="logout">
            <svg-icon icon-class="logout" />
            {{ $t("settings.logout") }}
          </button>
        </div>
      </div>
      <h2>{{ $t("settings.settings") }}</h2>
      <div class="item">
        <div class="left">
          <div class="title"> {{ $t("settings.language") }} </div>
        </div>
        <div class="right">
          <select v-model="lang">
            <option value="en">🇬🇧 English</option>
            <option value="zh-CN">🇨🇳 简体中文</option>
          </select>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="title"> {{ $t("settings.appearance.text") }} </div>
        </div>
        <div class="right">
          <select v-model="appearance">
            <option value="auto">{{ $t("settings.appearance.auto") }}</option>
            <option value="light"
              >🌞 {{ $t("settings.appearance.light") }}</option
            >
            <option value="dark"
              >🌚 {{ $t("settings.appearance.dark") }}</option
            >
          </select>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="title"> {{ $t("settings.musicQuality.text") }} </div>
        </div>
        <div class="right">
          <select v-model="musicQuality">
            <option value="128000">
              {{ $t("settings.musicQuality.low") }} - 128Kbps
            </option>
            <option value="192000">
              {{ $t("settings.musicQuality.medium") }} - 192Kbps
            </option>
            <option value="320000">
              {{ $t("settings.musicQuality.high") }} - 320Kbps
            </option>
            <option value="999000">
              {{ $t("settings.musicQuality.lossless") }} - FLAC
            </option>
          </select>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="title">
            {{ $t("settings.automaticallyCacheSongs") }}
          </div>
        </div>
        <div class="right">
          <div class="toggle">
            <input
              type="checkbox"
              name="automatically-cache-songs"
              id="automatically-cache-songs"
              v-model="automaticallyCacheSongs"
            />
            <label for="automatically-cache-songs"></label>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="title">
            {{
              $t("settings.cacheCount", {
                song: tracksCache.length,
                size: tracksCache.size,
              })
            }}</div
          >
        </div>
        <div class="right">
          <button @click="clearCache('tracks')">
            {{ $t("settings.clearSongsCache") }}
          </button>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="title">显示歌词翻译</div>
        </div>
        <div class="right">
          <div class="toggle">
            <input
              type="checkbox"
              name="show-lyrics-translation"
              id="show-lyrics-translation"
              v-model="showLyricsTranslation"
            />
            <label for="show-lyrics-translation"></label>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="title"> {{ $t("settings.showGitHubIcon") }} </div>
        </div>
        <div class="right">
          <div class="toggle">
            <input
              type="checkbox"
              name="show-github-icon"
              id="show-github-icon"
              v-model="showGithubIcon"
            />
            <label for="show-github-icon"></label>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="title">
            {{ $t("settings.showUnavailableSongInGreyStyle") }}</div
          >
        </div>
        <div class="right">
          <div class="toggle">
            <input
              type="checkbox"
              name="show-unavailable-song-grey"
              id="show-unavailable-song-grey"
              v-model="showUnavailableSongInGreyStyle"
            />
            <label for="show-unavailable-song-grey"></label>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="title">
            {{ $t("settings.showPlaylistsByAppleMusic") }}</div
          >
        </div>
        <div class="right">
          <div class="toggle">
            <input
              type="checkbox"
              name="show-playlists-by-apple-music"
              id="show-playlists-by-apple-music"
              v-model="showPlaylistsByAppleMusic"
            />
            <label for="show-playlists-by-apple-music"></label>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="title" style="transform: scaleX(-1)">🐈️ 🏳️‍🌈</div>
        </div>
        <div class="right">
          <div class="toggle">
            <input
              type="checkbox"
              name="nyancat-style"
              id="nyancat-style"
              v-model="nyancatStyle"
            />
            <label for="nyancat-style"></label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { doLogout } from "@/utils/auth";
import { changeAppearance, bytesToSize } from "@/utils/common";
import { countDBSize, clearDB } from "@/utils/db";

export default {
  name: "settings",
  data() {
    return {
      tracksCache: {
        size: "0KB",
        length: 0,
      },
    };
  },
  computed: {
    ...mapState(["settings", "data"]),
    lang: {
      get() {
        return this.settings.lang;
      },
      set(lang) {
        this.$i18n.locale = lang;
        this.$store.commit("changeLang", lang);
      },
    },
    appearance: {
      get() {
        if (this.settings.appearance === undefined) return "auto";
        return this.settings.appearance;
      },
      set(value) {
        this.$store.commit("updateSettings", {
          key: "appearance",
          value,
        });
        changeAppearance(value);
      },
    },
    musicQuality: {
      get() {
        if (this.settings.musicQuality === undefined) return 320000;
        return this.settings.musicQuality;
      },
      set(value) {
        if (value === this.settings.musicQuality) return;
        this.$store.commit("changeMusicQuality", value);
        this.clearCache("tracks");
      },
    },
    showGithubIcon: {
      get() {
        if (this.settings.showGithubIcon === undefined) return true;
        return this.settings.showGithubIcon;
      },
      set(value) {
        this.$store.commit("updateSettings", {
          key: "showGithubIcon",
          value,
        });
      },
    },
    showUnavailableSongInGreyStyle: {
      get() {
        return this.settings.showUnavailableSongInGreyStyle;
      },
      set(value) {
        this.$store.commit("updateSettings", {
          key: "showUnavailableSongInGreyStyle",
          value,
        });
      },
    },
    showPlaylistsByAppleMusic: {
      get() {
        if (this.settings.showPlaylistsByAppleMusic === undefined) return true;
        return this.settings.showPlaylistsByAppleMusic;
      },
      set(value) {
        this.$store.commit("updateSettings", {
          key: "showPlaylistsByAppleMusic",
          value,
        });
      },
    },
    nyancatStyle: {
      get() {
        if (this.settings.nyancatStyle === undefined) return false;
        return this.settings.nyancatStyle;
      },
      set(value) {
        this.$store.commit("updateSettings", {
          key: "nyancatStyle",
          value,
        });
      },
    },
    automaticallyCacheSongs: {
      get() {
        if (this.settings.automaticallyCacheSongs === undefined) return false;
        return this.settings.automaticallyCacheSongs;
      },
      set(value) {
        this.$store.commit("updateSettings", {
          key: "automaticallyCacheSongs",
          value,
        });
        if (value === false) {
          this.clearCache("tracks");
        }
      },
    },
    showLyricsTranslation: {
      get() {
        return this.settings.showLyricsTranslation;
      },
      set(value) {
        this.$store.commit("updateSettings", {
          key: "showLyricsTranslation",
          value,
        });
      },
    },
  },
  methods: {
    logout() {
      doLogout();
      this.$router.push({ name: "home" });
    },
    countDBSize(dbName) {
      countDBSize(dbName).then((data) => {
        if (data === undefined) {
          this.tracksCache = {
            size: "0KB",
            length: 0,
          };
          return;
        }
        this.tracksCache.size = bytesToSize(data.bytes);
        this.tracksCache.length = data.length;
      });
    },
    clearCache(dbName) {
      // TODO: toast
      clearDB(dbName).then(() => {
        this.countDBSize("tracks");
      });
    },
  },
  created() {
    this.countDBSize("tracks");
  },
  activated() {
    this.countDBSize("tracks");
  },
};
</script>

<style lang="scss" scoped>
.settings {
  display: flex;
  justify-content: center;
}
.container {
  margin-top: 24px;
  width: 720px;
}
h2 {
  margin-top: 48px;
  font-size: 36px;
  color: var(--color-text);
}

.user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-secondary-bg);
  color: var(--color-text);
  padding: 16px 20px;
  border-radius: 16px;
  img.avatar {
    border-radius: 50%;
    height: 64px;
    width: 64px;
  }
  img.cvip {
    height: 13px;
    margin-right: 4px;
  }
  .left {
    display: flex;
    align-items: center;
    .info {
      margin-left: 24px;
    }
    .nickname {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 2px;
    }
    .extra-info {
      font-size: 13px;
      .text {
        opacity: 0.68;
      }
      .vip {
        display: flex;
        align-items: center;
      }
    }
  }
  .right {
    .svg-icon {
      height: 18px;
      width: 18px;
      margin-right: 4px;
    }
    button {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 600;
      text-decoration: none;
      border-radius: 10px;
      padding: 8px 12px;
      opacity: 0.68;
      color: var(--color-text);
      transition: 0.2s;
      margin: {
        right: 12px;
        left: 12px;
      }
      &:hover {
        opacity: 1;
        background: #eaeffd;
        color: #335eea;
      }
      &:active {
        opacity: 1;
        transform: scale(0.92);
        transition: 0.2s;
      }
    }
  }
}

.item {
  margin: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text);

  .title {
    font-size: 18px;
    font-weight: 600;
    opacity: 0.88;
  }

  select {
    min-width: 192px;
    font-weight: 600;
    border: none;
    padding: 8px 12px 8px 12px;
    border-radius: 8px;
    color: var(--color-text);
    background: var(--color-secondary-bg);
    appearance: none;
    &:focus {
      outline: none;
      color: var(--color-primary);
      background: var(--color-primary-bg);
    }
  }

  button {
    color: var(--color-text);
    background: var(--color-secondary-bg);
    padding: 8px 12px 8px 12px;
    font-weight: 600;
    border-radius: 8px;
    transition: 0.2s;
    &:hover {
      transform: scale(1.06);
    }
    &:active {
      transform: scale(0.94);
    }
  }
}

.beforeAnimation {
  -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
}
.afterAnimation {
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04),
    0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
  -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
}
.toggle {
  margin: auto;
}
.toggle input {
  opacity: 0;
  position: absolute;
}
.toggle input + label {
  position: relative;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  height: 32px;
  width: 52px;
  background: var(--color-secondary-bg);
  border-radius: 8px;
}
.toggle input + label:before {
  content: "";
  position: absolute;
  display: block;
  -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
  height: 32px;
  width: 52px;
  top: 0;
  left: 0;
  border-radius: 8px;
}
.toggle input + label:after {
  content: "";
  position: absolute;
  display: block;
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.02), 0 4px 0px 0 hsla(0, 0%, 0%, 0.01),
    0 4px 9px hsla(0, 0%, 0%, 0.08), 0 3px 3px hsla(0, 0%, 0%, 0.03);
  -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
  background: #fff;
  height: 20px;
  width: 20px;
  top: 6px;
  left: 6px;
  border-radius: 6px;
}
.toggle input:checked + label:before {
  background: var(--color-primary);
  -webkit-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
  transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
}
.toggle input:checked + label:after {
  left: 26px;
}
</style>
